<template>
  <div class="app-container">
    <el-table
      :data="order_list"
      v-loading.body="listLoading"
      element-loading-text="Loading"
      :default-sort="{prop: 'date', order: 'ascending'}"
      border
      fit
      highlight-current-row
    >

      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form
            label-position="left"
            inline
            class="table-expand"
          >
            <el-form-item label="名字">
              <span>{{ scope.row.name }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ scope.row.sex }}</span>
            </el-form-item>
            <el-form-item label="身份证号">
              <span>{{ scope.row.ID_No }}</span>
            </el-form-item>
            <el-form-item label="护照证件号">
              <span>{{ scope.row.Passport_No }}</span>
            </el-form-item>
            <el-form-item label="出生日期">
              <span>{{ scope.row.Date_of_birth|formatDate }}</span>
            </el-form-item>
            <el-form-item label="证件有效期至">
              <span>{{ scope.row.Certificate_validity_period|formatDate }}</span>
            </el-form-item>
            <el-form-item label="证件照片">
              <img
                v-image-preview
                :src="'http://palao-image.oss-cn-shenzhen.aliyuncs.com/'+scope.row.imageUrl"
                alt=""
                class="imgcon"
              >
            </el-form-item>
            <el-form-item label="鼠标左击击图片可以查看大图">
              <span>右击图片选择图片另存则可以下载图片</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="订单号"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{scope.row.order_id}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="300"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="手机号码"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{scope.row.phonenumber}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="订单时间"
        sortable
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.ordertime|formatDate}}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="付款状态"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.pay_status | pay_statusFilter">{{scope.row.pay_status | pay_statusdisplay}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="订单状态"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status | statusdisplay}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="400"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="view_order_detalis(scope.row)"
          >查看订单详情</el-button>
          <el-button
            v-show="scope.row.status == 1"
            size="mini"
            type="success"
            @click="success_order(scope.row)"
          >成功订票</el-button>
          <el-button
            v-show="scope.row.status == 1 || (scope.row.status == 0 && scope.row.status == 2)"
            size="mini"
            type="danger"
            @click="fail_order(scope.row)"
          >无法订票</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import { modifyitem } from "@/api/table";
import { formatDate } from "@/utils/formatdate";
export default {
  data() {
    return {
      list: null,
      listLoading: false,
      order_list: []
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "success",
        1: "gray",
        2: "danger"
      };
      return statusMap[status];
    },
    statusdisplay(status) {
      const statusMap = {
        0: "成功",
        1: "等待",
        2: "失败"
      };
      return statusMap[status];
    },
    pay_statusFilter(status) {
      const statusMap = {
        0: "success",
        1: "danger"
      };
      return statusMap[status];
    },
    pay_statusdisplay(status) {
      const statusMap = {
        0: "已支付",
        1: "未支付"
      };
      return statusMap[status];
    },
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then(response => {
        console.log(response);
        this.order_list = response.data.order;
        this.listLoading = false;
      });
    },
    view_order_detalis(row) {
      this.$message({
        message: "请点击姓名左侧的三角形查看详情",
        type: "warning"
      });
    },
    fail_order(row) {
      console.log(row);
      row.status = 2;
      this.listLoading = true;
      modifyitem(row).then(res => {
        console.log(res);
        this.listLoading = false;
      });
    },
    success_order(row) {
      row.status = 0;
      this.listLoading = true;
      modifyitem(row).then(res => {
        console.log(res);
        this.listLoading = false;
      });
    }
  }
};
</script>
<style scoped>
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.imgcon {
  width: 300px;
  height: 300px;
}
</style>
